﻿@using Atomic.Mvc;

<link rel="stylesheet" href="/@Html.GetCorePluginPath("Atomic.Users")/Themes/Default/Content/Css/Icon/Icon.css" type="text/css" />
<link rel="stylesheet" href="/@Html.GetCorePluginPath("Atomic.Users")/Themes/Default/Content/Css/Icon/uploadify.css" type="text/css" />
<link rel="stylesheet" href="/@Html.GetCorePluginPath("Atomic.Users")/Themes/Default/Content/Css/Icon/jquery.Jcrop.min.css" type="text/css" />
<script type="text/javascript" src="/@Html.GetCorePluginPath("Atomic.Users")/Themes/Default/Content/Scripts/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="/@Html.GetCorePluginPath("Atomic.Users")/Themes/Default/Content/Scripts/jquery.uploadify.min.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        //头像上传，使用 uploadify 插件。
        $("#file").uploadify({
            width: 120,
            height: 30,
            dataType: 'json',
            swf: '/@Html.GetCorePluginPath("Atomic.Users")/Themes/Default/Content/Css/Icon/uploadify.swf',
            uploader: '/user/settings/icon/load',
            onUploadSuccess: fun
        });

        //这里返回的数据并不是 Json 对象。
        function fun(fileObj, data, response) {
            //把 Json 字符串转换成 Json 对象。
            var dataObj = eval("(" + data + ")");
            if (response != "") {
                if (data != null) {
                    $("#uploadPic").attr("style", "width:" + dataObj.ViewWidth + "; height:" + dataObj.ViewHeight + ";");
                    $("#uploadPic").attr("src", dataObj.Image);
                    $("#crop_preview_200").attr("src", dataObj.Image);
                    $("#crop_preview_small").attr("src", dataObj.Image);
                    onShowPreview();
                }
            }
            else {
                alert("文件上传出错！");
            }
        }

        function onShowPreview() {
            //裁剪预览图片，使用 Jcrop 插件。
            $('#uploadPic').Jcrop({
                onChange: showPreview,
                onSelect: showPreview,
                allowSelect: false,
                aspectRatio: 1,
                bgOpacity: 0.5,
                aspectRatio: 1 / 1,
                minSize: [60, 60],
                setSelect: [0, 0, 60, 60]
            });
        }

        //简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用
        function showPreview(coords) {
            $("#X").val(coords.x);
            $("#Y").val(coords.y);
            $("#Width").val(coords.w);
            $("#Height").val(coords.h);

            if (parseInt(coords.w) > 0) {
                //计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
                var rx = $("#preview_box_200").width() / coords.w;
                var ry = $("#preview_box_200").height() / coords.h;
                //通过比例值控制图片的样式与显示
                $("#crop_preview_200").css({
                    //预览图片宽度为计算比例值与原图片宽度的乘积
                    width: Math.round(rx * $("#uploadPic").width()) + "px",
                    //预览图片高度为计算比例值与原图片高度的乘积
                    height: Math.round(rx * $("#uploadPic").height()) + "px",
                    marginLeft: "-" + Math.round(rx * coords.x) + "px",
                    marginTop: "-" + Math.round(ry * coords.y) + "px"
                });

                /************37 X 37************/
                var rx = $("#preview_box_small").width() / coords.w;
                var ry = $("#preview_box_small").height() / coords.h;
                //通过比例值控制图片的样式与显示
                $("#crop_preview_small").css({
                    //预览图片宽度为计算比例值与原图片宽度的乘积
                    width: Math.round(rx * $("#uploadPic").width()) + "px",
                    //预览图片高度为计算比例值与原图片高度的乘积
                    height: Math.round(rx * $("#uploadPic").height()) + "px",
                    marginLeft: "-" + Math.round(rx * coords.x) + "px",
                    marginTop: "-" + Math.round(ry * coords.y) + "px"
                });
            }
        }

        $("#btnAjaxSubmit").click(function () {
            $.ajax({
                type: "POST",
                url: "/user/settings/icon",
                data: $(this).parent().serialize(),
                dataType: 'json',
                success: function (data) {
                    if (data > 0) {
                        alert("头像上传成功！");
                    }
                },
                error: function () {
                    alert("头像上传异常！");
                }
            });
        });
    });
</script>

@*预览区域*@
<div style="background-color:WindowFrame; width:400px; height:300px;">
    <img id="uploadPic" style="background-color:aliceblue;" />
</div>
<span id="preview_box_200" class="crop_preview" style="background-color:#0094ff;">
    <img id="crop_preview_200"/>110 X 110
</span>

<span id="preview_box_small" class="crop_preview" style="background-color:#ff6a00; width:37px; height:37px; margin-left:200px;">
    <img id="crop_preview_small" />37 X 37
</span>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<form id="userIconForm" action="/user/settings/icon" method="post">
    <input id="X" name="X" type="hidden" />
    <input id="Y" name="Y" type="hidden" />
    <input id="Width" name="Width" type="hidden" />
    <input id="Height" name="Height" type="hidden" />
    <input id="btnAjaxSubmit" type="button" value="提交" />
</form>

图片1:&nbsp;&nbsp;<input type="file" id="file" name="file" />